<template>
  <div class="statistic-container">
    <div class="top-left">
      <div id="top-left-top" class="statistic-card">
        <el-select v-model="currentTeam" filterable @change="changeTeam">
          <el-option v-for="item in teams.arr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-statistic :value="dayTotalFlowT">
          <template #title>
            <span class="title">今日日累计流量</span>
          </template>
          <template #suffix> m³ </template>
        </el-statistic>
        <el-statistic :value="weekTotalFlowT">
          <template #title>
            <span class="title">本周日累计流量总和</span>
          </template>
          <template #suffix> m³ </template>
        </el-statistic>
        <el-statistic :value="dayRiskRecordNumT">
          <template #title>
            <span class="title">今日风险异常数据量</span>
          </template>
        </el-statistic>
        <el-statistic :value="weekRiskRecordNumT">
          <template #title>
            <span class="title">本周风险异常数据量</span>
          </template>
        </el-statistic>
      </div>
      <div id="top-left-bottom">
        <TotalFlowCompareCom v-if="currentTeam"></TotalFlowCompareCom>
      </div>
    </div>
    <div class="top-right">
      <ParamsCom v-if="currentTeam"></ParamsCom>
    </div>
    <div class="bottom-left">
      <ParamsCompareCom v-if="currentTeam"></ParamsCompareCom>
    </div>
    <div class="bottom-right">
      <TotalFlowTrendCom v-if="currentTeam"></TotalFlowTrendCom>
    </div>
  </div>
</template>
<script setup name="StatisticPage">
import { onMounted } from 'vue'
import ParamsCom from '../components/statistic/ParamsCom.vue'
import ParamsCompareCom from '../components/statistic/ParamsCompareCom.vue'
import TotalFlowCompareCom from '../components/statistic/TotalFlowCompareCom.vue'
import TotalFlowTrendCom from '../components/statistic/TotalFlowTrendCom.vue'
import { useStatistic } from '../hooks/statistic/useStatistic'
const {
  teams,
  currentTeam,
  dayRiskRecordNumT,
  weekRiskRecordNumT,
  dayTotalFlowT,
  weekTotalFlowT,
  changeTeam,
  getTeamList,
  getStatisticRiskRecord,
  getStatisticTotalFlow
} = useStatistic()
onMounted(async () => {
  await getTeamList()
  getStatisticRiskRecord()
  getStatisticTotalFlow()
})
</script>
<style lang="less" scoped>
.statistic-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .top-left {
    width: 65%;
    height: 55%;
    #top-left-top {
      height: calc(20% - 4px);
    }
    #top-left-bottom {
      height: calc(80% - 12px);
    }
  }
  .top-right {
    width: 35%;
    height: 55%;
  }
  .bottom-left {
    width: 45%;
    height: 45%;
  }
  .bottom-right {
    width: 55%;
    height: 45%;
  }
}
.statistic-card {
  padding: 10px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 20px;
}
</style>
